@extends('layouts.scaffold')

@section('head')
	{{ HTML::script('angularjs/counter.js') }}
	{{ HTML::style('styles/counter.css') }}
@endsection

@section('navbar')
	@include('menu.navbar')
@endsection

@section('main')
<div ng-controller="MyAppControllerTempo" class="row">
	
	<div class="col-md-2 peekaboo" id="btns">
		<ul>
			<li><button ng-click="setTimer(true)" class="btn btn-default btn-lg ">20min</button></li>
			<li><button ng-click="setTimer(false)"  class="btn btn-default btn-lg ">2min</button></li>
			<li><button ng-click="stopTimer()"  class="btn btn-default btn-lg ">Stop</button></li>
		</ul>	
	</div>
	<div class="col-md-9 contador-border">
		<div class="contador-main">
			<center><h1>PLANEAMENTO</h1></center>

			<div class="row">
				<center>
					<div class="col-md-9" ng-if="show20min">
						<p id="timer"><strong>
							<timer autostart="false" interval="1000" countdown="1200" finish-callback="callbackTimer.finished()">[[mminutes]] : [[sseconds]]</timer>
						</strong></p>
					</div>
					<div class="col-md-9" ng-if="!show20min">
						<p id="timer"><strong>
							<timer autostart="false" interval="1000" countdown="120" finish-callback="callbackTimer.finished()">[[mminutes]] : [[sseconds]]</timer>
						</strong></p>
					</div>
					<div class="col-md-2">
						<button ng-click="startTimer()"  ng-disabled="timerRunning" class="btn [[btn]] btn-xlarge">Start</button>
					</div>
				</center>
			</div>

			<div ng-switch on="frase" ng-show="show20min">
				<center>
					<div ng-switch-when="1"><h3>DEFINAM O PAPEL DE CADA UM</h3></div>
					<div ng-switch-when="2"><h3>ESCOLHAM O PERCURSO</h3></div>
					<div ng-switch-when="3"><h3>PLANEIEM OS RECURSOS PARA IR E VIR DA MINA</h3></div>
				</center>
			</div>
		</div>
	</div>		
</div>
@endsection